<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WMTS-4490</title>
    <!-- 引入OpenLayers库 -->
    <link rel="stylesheet" href="https://data.sunbt.ltd/lib/ol/v6.15.1/css/ol.css" type="text/css">
    <script src="https://data.sunbt.ltd/lib/ol/v6.15.1/build/ol.js"></script>
</head>
<style type="text/css">
    body {
        margin: 0;
        padding: 0;
    }

    html, body, #map {
        width: 100%;
        height: 100%;
    }
</style>
<body>
<div id="map" class="map"></div>

<script>

    // 天地图访问授权key
    let key = 'cfafaa0d269a0e29688c4482cfae7c64';
    // 设置WMTS瓦片地图的瓦片坐标系为EPSG:4326
    let projection = ol.proj.get('EPSG:4326');
    let projectionExtent = projection.getExtent();
    let size = ol.extent.getWidth(projectionExtent) / 256;
    let resolutions = new Array(22);
    let matrixIds = new Array(22);
    for (let z = 0; z < 20; ++z) {
        resolutions[z] = size / Math.pow(2, z);
        console.log(resolutions[z])
        matrixIds[z] = '' + (z);
    }

    let wmtsTileGrid = new ol.tilegrid.WMTS({
        tileSize: [256, 256],
        extent: [-180.0, -90.0, 180.0, 90.0],  //范围
        origin: [-180.0, 90.0],   //切片原点
        resolutions: resolutions,
        matrixIds: matrixIds
    })

    // WMTS数据源与地图
    let wmtsSource = new ol.source.WMTS({
        url: "http://mapservices.njghzy.com.cn:84/njmap/NJDOM_DT/wmts?njtoken=7117bafd5ba7abd828421590d1d0124a",
        layer: "NJDOM_2019",        // 对应的图层
        matrixSet: 'NJDOM_2019_Matrix_0',         // 投影坐标系参数矩阵集
        format: 'image/png',                // 图片格式
        projection: projection,             // 投影坐标系
        // 投影坐标系
        tileGrid: wmtsTileGrid
    });
    let wmtsLayer = new ol.layer.Tile({
        source: wmtsSource
    });

    let width = ol.extent.getWidth(projectionExtent);   // web墨卡托投影坐标系的水平宽度，单位米
    let resolutions_tdt = [];                               // 瓦片地图分辨率
    let matrixIds_tdt = [];
    for (let z = 1; z < 18; z++) {
        resolutions_tdt[z] = width / (256 * Math.pow(2, z));
        matrixIds_tdt[z] = z;
    }
    let wmtsTileGrid_tdt = new ol.tilegrid.WMTS({
        origin: ol.extent.getTopLeft(projectionExtent), // 原点（左上角）
        resolutions: resolutions_tdt,                       // 瓦片分辨率
        matrixIds: matrixIds_tdt                            // 矩阵ID，就是瓦片坐标系z维度各个层级的标识
    });


    // 首先，我们创建一个数组包含所有的服务器名：
    const tdtServers = ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'];

    // 接着，我们定义一个函数，用于返回一个随机的服务器名：
    function getRandomTdtServer() {
        const randomIndex = Math.floor(Math.random() * tdtServers.length);
        return tdtServers[randomIndex];
    }

    // 天地图矢量
    let wmtsLayer_vec = new ol.layer.Tile({
        source: new ol.source.WMTS({
            url: `http://${getRandomTdtServer()}.tianditu.gov.cn/vec_c/wmts?tk=` + key,
            layer: 'vec',
            version: '1.0.0',
            matrixSet: 'c',
            format: 'tiles',
            projection: projection,
            requestEncoding: 'KVP',
            style: 'default',
            tileGrid: wmtsTileGrid_tdt
        })
    });

    let map = new ol.Map({
        target: 'map',
        layers: [
            // wmtsLayer_vec,
            wmtsLayer
        ],
        view: new ol.View({
            center: [118.78545283889815, 32.018556485783094],
            projection: "EPSG:4326",
            zoom: 10,
            maxZoom: 19,
            minZoom: 2
        })
    });
</script>
</body>
</html>
